<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    姓：<input type="text" v-model="firstName"><br/>
    名：<input type="text" v-model="lastName"><br/>
    全名：<span>{{fullName}}</span>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                firstName: 'Wu',
                lastName: 'JingZe'
            };
        },
        computed: {
            // fullName: {
            //     // 当有人读取fullName时getter方法被调用
            //     // get什么时候被调用？ 1.当初次读取fullName时，此时fullName就会缓存 2.所依赖的数据发生变化时
            //     get() {
            //         return this.firstName + '-' + this.lastName;
            //     },
            //
            //     set(val){
            //         console.log(val)
            //     }
            // }

            // 简写形式，前提是没有setter函数
            // fullName:function (){
            //     return this.firstName + '-' + this.lastName;
            // }

            // 再简写
            fullName(){
                return this.firstName + '-' + this.lastName;
            }

        }
    })
</script>
</body>
</html>